<template>
	<view class="boxs" v-if="show">
		<!-- <view class="text">
			{{flage}}
		</view> -->
		<view class="left">
			<view class="button">
			</view>
		</view>
		<view class="centerLiuGuangAdmin">
			<view class="centerLiuGuang">
			</view>
		</view>
		<view class="right">
			<view class="button">
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onShow
	} from '@dcloudio/uni-app'
	const show = ref(true)
	onShow(() => {
		show.value = true
		setTimeout(() => {
			show.value = false
		}, 7000)
	})
</script>

<style lang="scss">
	.boxs {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		// background-color: black;
		display: flex;
		justify-content: space-between;
		z-index: 99;

		.centerLiuGuang {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			width: 100%;
			background-color: red;
			background: url('../../static/component/liuguang.png') no-repeat 100%, 100%;
			background-position: 0rpx;
			bottom: 0;
			top: 0;
			background: linear-gradient(to right, #aa00ff, #ff8800, #eaff00, #00f4e0, #000000);
			/* 背景渐变色大小 */
			background-size: 400%;
			/* 圆角 */
			border-radius: 50px;
			animation: streamer 6s 1s infinite;

			// animation: streamer 0.9s 1s steps(6, start) infinite backwards; 血条闪动效果
		}

		.centerLiuGuangAdmin {
			animation: streamervanish 1.5s 3s forwards;
		}

		.left {
			height: 100%;
			width: 48%;
			background-color: red;
			position: relative;
			z-index: 1;
			border-right: rgba(0, 0, 0, 0.5) 3rpx solid;
			background: url('../../static/component/men1.png') no-repeat 0rpx, 200%;
			animation: kleft 3s 3s forwards;
		}

		.right {
			position: relative;
			width: 49%;
			height: 100%;
			z-index: 1;
			border-left: rgba(0, 0, 0, 0.5) 3rpx solid;
			background: url('../../static/component/men1.png') no-repeat 100%, 100%;
			animation: kright 3s 3s forwards;
		}

		.button {
			position: absolute;
			left: 50%;
			top: 50%;
			width: 250rpx;
			height: 250rpx;
			border-radius: 50%;
			transform: translateX(-50%) translateY(-50%);
			background-image: url('/static/component/16pic_4561973_s.png');
			background-position: 0, 0;
			background-repeat: no-repeat;
			background-size: 100%, 100%;


		}
	}

	.text {
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		top: 200rpx;
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
		z-index: 10;
		background-color: rgba(0, 0, 0, 0.5);
		// font-size: $textTitle;
		color: #ffffff;
		border: #ffffff 3rpx solid;
		text-align: center;
	}





	/* 接下来定义动画 */
	@keyframes streamer {
		100% {
			/* 背景位置 */
			background-position: -400% 0;
		}
	}

	@keyframes streamervanish {
		100% {
			/* 背景位置 */
			opacity: 0;
		}
	}

	// 开门
	@keyframes kleft {

		100% {
			/* 背景位置 */
			transform: translateX(-100%);
		}
	}

	@keyframes kright {
		100% {
			/* 背景位置 */
			transform: translateX(100%);
		}
	}
</style>